@import "~@/common/common.css.styl"
.home
	width 100%
	height 100%
	padding 22px 18px 35px 48px
	bgImg("home/home-bg.png")
	background-repeat no-repeat
	background-size 100% 100%

	.head
		height 82px
		display flex
		justify-content space-between

		.time
			width 181px

		.system
			margin-left 55px
			margin-right 126px
			position: relative;

			.bg
				height 82px
				display flex
				flex-direction column
				justify-content space-between
				align-items center

				.bg-1
					width (361 * 2 + 621) px
					border-top 1px solid #1C67A6

				.bg-2
					width (305 * 2 + 621) px
					border-top 1px solid #1C67A6
					margin-top 1.5%

				.bg-3
					width (234 * 2 + 621) px
					border-bottom 1px solid #1C67A6

			.center
				position: absolute;
				left 50%
				top 50%
				transform translate(-50%, -50%)
				width 621px
				height 82px
				line-height: 82px;
				text-align center
				background #041A40
				border-radius 4px
				box-shadow 0 0 6px #aeaeae

				.top
					position: absolute;
					left 50%
					transform translateX(-50%)
					top 0
					border-top 3px solid #02CDE6
					width 453px

				.bottom
					position: absolute;
					left 50%
					transform translateX(-50%)
					bottom 0
					border-bottom 3px solid #02CDE6
					width 302px

				.text
					font-size font-bx
					font-family "方正工业黑"
					font-weight bold

		.weather
			width 132px

	.body
		margin-top: 20px
		width: 100%;
		height: calc(100% - 102px)
		display: flex
		justify-content space-between
		align-items center

		.left, .middle, .right
			display: flex
			flex-direction column
			justify-content space-between
			align-items center

		.left
			width: 470px
			height: 100%;

			.item-top
				height: 360px
				width: 100%

			.item-bottom
				margin-top 16px
				height: calc(100% - 360px - 16px)
				width: 100%;

		.middle
			width: 924px
			height 100%

			.middle-top
				height: 486px
				width: 100%

			.middle-bottom
				margin-top 16px
				height: calc(100% - 486px - 16px)
				width: 100%

		.right
			width: 414px
			height: 100%

			.item-top
				height: 434px
				width: 100%

			.item-bottom
				margin-top 16px
				height: calc(100% - 434px - 16px)
				width: 100%;
